<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>登录页面</title>
    <base href="<%=basePath%>" />
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="css/login.css">
    <style>
        body,html{
            background: url(images/beijing.jpg) no-repeat fixed center 0;
            background-size: 100%;
            height: 100%;
            width: 100%;
        }
        .zbutton{
            background-color:#6cadeb;
            color:white;
            width: 50px;
            height: 40px;
            border:0;
            font-size: 16px;
            box-sizing: content-box;
            border-radius: 5px;
        }
        .zbutton:hover{
            background-color: #d1c6c6;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            document.getElementById("login1").click();
            $("#login").click(function () {
                console.log("验证登录ing");
                if ($("#userName").val()==""||$("#pwd").val()==""){
                    alert("用户名或密码不能为空");
                }else {
                    var json = {
                        "name":$("#userName").val(),
                        "pwd":$("#pwd").val()
                    };
                    $.ajax({
                        url:"user/login.do",
                        type:"post",
                        data:json,
                        dataType:"json",
                        success:function(data){
                            if (data.success){
                                //跳转到用户页
                                console.log("跳转到用户页");
                                showMsg("正在登录中...");
                                setTimeout(function () {//做延时以便显示登录状态值
                                    sessionStorage.setItem("name",$("#userName").val());
                                    if (data.flag==1){
                                        window.location.href =  "shopping.jsp";
                                    }else if(data.flag==2){
                                        window.location.href =  "bookstore.jsp";
                                    }else {
                                        window.location.href =  "supplier.jsp";
                                    }
                                },700);
                            }else {
                                showMsg(data.msg);
                                setTimeout(function () {
                                    showMsg(" ");
                                },2000);
                            }
                        }
                    })
                }
            })
            $("#zhuce").click(function () {
                console.log("注册ing");
                var pattern = /^[^\u4e00-\u9fa5 ]{4,16}$/;
                if ($("#userName1").val()==""||$("#pwd1").val()==""){
                    alert("用户名或密码不能为空");
                }else if ($("#pwd1").val()!=$("#pwd2").val()){
                    alert("两次密码不一致");
                }else if (!pattern.test($("#pwd1").val()+"")){
                    alert("输入不能含有中文和空格，至少4位，最多16位的密码")
                }else {
                    var json = {
                        "name":$("#userName1").val()+"",
                        "pwd":$("#pwd1").val()+""
                    };
                    $.ajax({
                        url:"user/addUser.do",
                        type:"get",
                        data:json,
                        dataType:"json",
                        success:function(data){
                            if (data.success){
                                showMsg(data.msg);
                                setTimeout(function () {
                                    showMsg(" ");
                                    document.getElementById("login1").click();
                                },1600);
                            }else {
                                showMsg(data.msg);
                                setTimeout(function () {
                                    showMsg(" ");
                                },1600);
                            }
                        }
                    })
                }
            })
        })
        //信息提醒
        function showMsg(msg){
            $("#CheckMsg").text(msg);
        }
        function zzzz() {
            window.location.href = "shopping.jsp";
        }
    </script>
</head>
<body>
<div align="right" style="position:relative;top:10px;right: 10px;">
    <button class="zbutton" onclick="zzzz()">主页</button>
</div>
<div class="wrapper mark" style="display: block;">
    <div class="main">
        <form action="index.html" name="myForm" id="Form">
            <div class="top">
                <div class="login1" id="login1">
                    登录
                </div>
                <div class="registe" id="registe">
                    注册
                </div>
                <span class="close">.</span>
            </div>
            <div class="body">
                <div class="body_login" style="display: block;">
                    <div class="userName clear">
                        <label>账号：</label><input type="text" id="userName" placeholder="用户名">
                    </div>
                    <div class="password">
                        <label>密码：</label><input type="password" id="pwd" placeholder="密码">
                    </div>
                    <div class="btn2">
                        <input type="button" id="login" value="登录"/>
                        <input type="reset" value="重置"  />
                    </div>
                </div>
                <div class="body_registe" style="display: none;">
                    <div class="clear">
                        <label>账号：</label><input type="text" id="userName1" placeholder="请输入用户名" />
                        <label>密码：</label><input type="password" id="pwd1" placeholder="请输入密码" />
                        <label>密码确认：</label><input type="password" id="pwd2" placeholder="请再次输入密码" />
                    </div>
                    <div class="btn2">
                        <input type="button" id="zhuce" value="注册"  />
                        <input type="reset" value="重置" />
                    </div>
                </div>
            </div>
        </form>
        <div id="CheckMsg" class="msg"></div>
    </div>
</div>
<script>
    var login=document.querySelector(".login1");
    var registe=document.querySelector(".registe");
    var body_login=document.querySelector(".body_login");
    var body_registe=document.querySelector(".body_registe");
    login.onclick=function(){
        login.style.backgroundColor="silver";
        body_login.style.display="block";
        body_registe.style.display="none";
        registe.style.backgroundColor="";
    }
    registe.onclick=()=>{
        login.style.backgroundColor="";
        registe.style.backgroundColor="silver";
        body_login.style.display="none";
        body_registe.style.display="block";
    }
</script>
</body>
</html>
